<template>
    <div class="detect-box app-container tz-app">
        <div class="serve-real flex">
            <div class="real-left flex-left">
                <div class="real-headline flex-s b-left b-right">
                    <div class="real-button real-button-left " :class="interface.button == 0 ? 'real-opt' : ''"
                        @click="setInterface(0)">传输界面</div>
                    <div class="real-button real-button-right" :class="interface.button == 1 ? 'real-opt' : ''"
                        @click="setInterface(1)">地图界面</div>
                </div>

                <div class="chat-box" v-if="chatShow">
                    <div>
                        <ChatWindow ref="chat" :type="chatType == 0 ? true : false"  :receiveList="receiveChat.list" :sendList="sendChat.list"></ChatWindow>
                        <!-- <div v-else style="height: calc(100vh - 300px); width: 100%;" class="flex-s">
                            <div>
                                <img src="@/assets/img/customer-service.png" style="width: 75px;height: 75px;">
                                <div style="text-align: center; color: white;font-size: 16px;">在 线 语 音</div>
                            </div>

                        </div> -->
                    </div>
                    <div class="chat-end" v-show="chatType == 0">
                        <!-- <div class="chat-hint">低速传输（限制30个字符）</div> -->
                        <div class="chat-input-box flex-s">
                            <el-input class="chat-input" v-model="sendData.data" maxlength="30"
                                @keyup.enter="send"></el-input>
                            <div class="chat-button cursor" @click="send(1)">发送</div>
                            <img src="@/assets/images/setsend.png" @click="chatType = 1"
                                style="width: 60px;cursor: pointer;margin-left: 10px;" />
                        </div>
                    </div>

                    <div class="chat-end chat-audio flex-s" v-show="chatType == 1">
                        <div class="audio-box flex-s">
                            <div class="flex-left flex-item">
                                <div class="flex-right audio-button2 cursor" @click="uploadAudio">
                                    <div class="flex-s">上传音频
                                        <img src="@/assets/img/upload-2.png"
                                            style="width: 20px;height: 20px;margin-left: 5px;">
                                    </div>
                                </div>

                                <!-- Display current audio file name -->
                                <!-- <div v-if="audioSrc" id="currentAudio">{{ audioSrc }}</div> -->

                                <audio v-if="audioSrc" controls style=" height: 40px;" :src="audioSrc"></audio>


                            </div>

                            <!-- <div class="flex-left">当前无录音</div> -->
                            <div class="chat-button2 cursor" v-if="audioSrc == null" style="margin-left: auto;">发送</div>
                            <div class="chat-button cursor" v-else style="margin-left: auto;" @click="send(0)">发送</div>
                            <img src="@/assets/images/setsend.png" @click="chatType = 0"
                                style="width: 60px;cursor: pointer;margin-left: 10px;" />

                        </div>
                    </div>

                    <div class="chat-end chat-audio flex-s" v-show="message.button == 2">
                        <div class="audio-box flex-s">
                            <div class="flex-left audio-button3 cursor">
                                <div class="flex-s">按下通话</div>
                            </div>
                            <div class="flex-left audio-hint">
                                请使用麦克风说话
                            </div>
                            <img src="@/assets/img/customerservice.png" style="width: 70px; height: 70px;" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="real-right flex-right">
                <div class="real-headline flex-s b-right">
                    <div class="real-button real-button-left" :class="message.button == 0 ? 'real-opt' : ''"
                        @click="setMessage(0)">
                        发射</div>
                    <div class="real-button real-button-right" :class="message.button == 1 ? 'real-opt' : ''"
                        @click="setMessage(1)">接收
                    </div>
                    <!-- <div class="real-button real-button-right" :class="message.button == 2 ? 'real-opt' : ''"
                        @click="setMessage(2)">在线语音</div> -->
                </div>



                <div class="station-function station-lora" v-show="message.button == 0">
                    <div class="gray">传输电台</div>
                    <div class="station-li">
                        <div class="flex p_20">
                            <div class="lh-40">选择电台:</div>
                            <el-select v-model="sendData.dstId" placeholder="选择电台" class="blank-input m-10"
                                @change="dstIdChange" style="width:200px;">
                                <el-option v-for="item in listAll.station" :key="item.radioStationCode"
                                    :label="item.radioStationName" :value="item.radioStationCode">
                                </el-option>
                            </el-select>
                            <div class="lh-40">时间:</div>
                            <el-date-picker v-model="sendData.time" type="datetime" class="zt-input-time-data  m-10"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </div>

                    <div class="gray" style="margin-top: 20px;">发射设置</div>
                    <div class="flex station-li p_20" v-show="message.button == 0">
                        <div class="lh-40 w-30 t-rihgt">工作频率:</div>
                        <el-input style="width: 100px;" placeholder="0" v-model="virtualFreq"
                            class="blank-input m-10"></el-input>
                        <div class="lh-40 t-rihgt">发射功率:</div>
                        <el-input style="width: 100px;" placeholder="0" v-model="sendData.power"
                            class="blank-input m-10"></el-input>

                    </div>

                    <div class="gray" style="margin-top: 20px;">语言短信</div>
                    <div class="flex station-li p_20" v-show="message.button == 0">
                        <div class="lh-40 w-30 t-rihgt">短信类型:</div>
                        <el-select v-model="sendData.sendType" placeholder="选择电台" class="blank-input m-10"
                            style="width:300px;">
                            <el-option v-for="item in dict.type.radio_message" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>

                </div>

                <div class="station-function station-lora" v-show="message.button == 1">
                    <div class="gray">传输电台</div>
                    <div class="station-li">
                        <div class="flex p_20">
                            <div class="lh-40">选择电台:</div>
                            <el-select v-model="receiveData.radioStationCode" placeholder="选择电台" class="blank-input m-10"
                                style="width:300px;">
                                <el-option v-for="item in listAll.station" :key="item.radioStationCode"
                                    :label="item.radioStationName" :value="item.radioStationCode">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="gray">通道设置</div>
                    <div class="station-li">
                        <aisle :arr="aisleList" @setAisleList="setAisleList"></aisle>
                    </div>

                    <button class="bt-blue" style="position:absolute;right: 20px;margin-top: 20px;"
                        @click="postReceiveRadioStation">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>

import { sendRadioStation , receiveRadioStation , receiveList , sendList} from "@/api/business/transfer";
import { getRadioStationList } from "@/api/business/station";
import ProgressBar from '@/components/TZ/ProgressBar/index.vue';
import ChatWindow from '@/components/TZ/ChatWindow/index.vue';
import Aisle from '@/components/TZ/Aisle/index.vue';
import Decimal from 'decimal.js';

export default {
    dicts: ['radio_message'],
    props: {

    },
    data() {
        return {
            interface: {
                button: 0,
            },
            message: {
                button: 0
            },

            chatType: 0,//发送消息聊天类型
            station: {
                num: 100,
                numOn: 25,
                numOff: 75,
            },
            aisleList: [
                { channel: 9, freq: 1 },
                { channel: 4, freq: 2 },
                { channel: 7, freq: 5 },
                { channel: 8, freq: 7 },
                { channel: 6, freq: 5 },
                { channel: 3, freq: 1 },
                { channel: 3, freq: 2 },
                { channel: 9, freq: 1 },
                { channel: 4, freq: 2 },
                { channel: 7, freq: 5 },
                { channel: 8, freq: 7 },
                { channel: 6, freq: 5 },
                { channel: 3, freq: 1 },
                { channel: 3, freq: 2 },
                { channel: 9, freq: 1 },
                { channel: 4, freq: 2 },
                { channel: 7, freq: 5 },
                { channel: 8, freq: 7 },
                { channel: 6, freq: 5 },
                { channel: 3, freq: 1 },
                { channel: 3, freq: 2 },
                { channel: 4, freq: 2 },
                { channel: 7, freq: 5 },
                { channel: 8, freq: 7 },
                { channel: 6, freq: 5 },
                { channel: 3, freq: 1 },
                { channel: 3, freq: 2 },
                { channel: 4, freq: 2 },
                { channel: 7, freq: 5 },
            ],
            listAll: {
                station: [],//电台集合
            },
            sendData: {//发送
                dstId: "",//电台code
                channel: 0,
                freq: "",//工作频率 显示数据被除以一百万
                power: "",//发射功率 
                sendType: "",//短信类型
                data: "",//信息内容
                time: "",//设置时间
                data_base64: "",
            },
            virtualFreq: null,//工作频率
            receiveData: {//接收
                radioStationCode: "",//电台code
                data: [],
            },
            audioSrc: null,
            chatShow: false,
            mapShow: false,
            receiveChat:{
                list:[],
                pageNum:1,
                pageSize:10,

            },//接收窗口
            sendChat:{
                list:[],
                pageNum:1,
                pageSize:10,
            },//发送窗口
            
        }
    },

    components: {
        ProgressBar,
        ChatWindow,
        Aisle,
    },
    mounted() {
        this.getListAll()
    },
    watch: {

    },
    methods: {
        dstIdChange(index) {
            this.chatShow = true
            this.getSendList();
            this.getReceiveList();
        },
        getReceiveList(){
            const data = {
                dstId:this.sendData.dstId
            }
            receiveList(data).then(response => {
                this.receiveChat.list = response.rows
            });
        },
        getSendList(){
            const data = {
                dstId:this.sendData.dstId
            }
            sendList(data).then(response => {
                this.sendChat.list = response.rows
            });
        },
        uploadAudio() {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'audio/*';
            fileInput.addEventListener('change', (event) => {
                const file = event.target.files[0];

                if (file) {
                    const reader = new FileReader();
                    reader.onload = () => {
                        this.audioSrc = reader.result;
                    };
                    reader.readAsDataURL(file);
                }
            });

            fileInput.click();
        },
        getListAll() {//获取集合数据
            const data = {
                isNet: 1
            }
            getRadioStationList(data).then(response => {
                this.listAll.station = response.rows
            });
        },
        setAisleList(data) {//获取修改后的数据
            this.aisleList = data
        },
        setInterface(index) {
            this.interface.button = index
            if (index == 0) {
                if (this.sendData.dstId != "") {
                    this.chatShow = true
                }
            }
            if (index == 1) {
                this.mapShow = true
            }

        },
        setMessage(index) {
            this.message.button = index;
        },

        send(index) {
            if (index == 0) {//0传送音频
                this.sendData.data = ""

                // const base64Data = this.audioSrc.split(',')[1];
                const base64Data = this.audioSrc;
                this.sendData.data_base64 = base64Data
            } else {
                this.sendData.data_base64 = ""
            }

            this.postSendRadioStation()

        },

        postSendRadioStation() {
            const freq = new Decimal(this.virtualFreq).mul(1000000).toNumber();
            this.sendData.freq = freq + ""
            sendRadioStation(this.sendData).then(response => {
                this.audioSrc = null;
                this.sendData.data_base64 = "";
                this.sendData.data = "";
            });
        },
        postReceiveRadioStation() {
            const data = {
                radioStationCode: this.receiveData.radioStationCode,
                data: this.aisleList
            }
            receiveRadioStation(data).then(response => {
                this.audioSrc = null;
                this.sendData.data_base64 = "";
                this.sendData.data = "";
            });
        },

    }
}
</script>
  
<style lang="scss"></style>
    